<template>
	<view class="outBox">
		<u-navbar leftText="收入明细" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0, 0, 0, 0.6)">
			<view class="left-slot" slot="left">
				<u-icon name="arrow-left" color="#fff"></u-icon>
				<text>{{ '收入明细' }}</text>
			</view>
		</u-navbar>
		<VideoBox>
			<template #content>
				<view class="content" @click.stop="closeInfoBox">
					<view class="topFilter">
						<view class="selectTime">
							<ep-select v-model="selectTime" :options="options" @change="changeTime"></ep-select>
						</view>
						<view class="right">
							<!-- <text>业绩835345元</text>
              <text>分拥835345元</text> -->
						</view>
					</view>
					<view class="list">
						<view class="item" :style="{
							  backgroundImage:`url(${bg})`
									}">
							<view class="left">
								<text class="name">
									<text>基础提成</text>
								</text>
								<view class="name" @click.stop="openInfo1">
									<text>比例/金额</text>
									<view class="showInfoBox" :style="{
									  background:`url(${infoBg})`,
									  backgroundSize:'100% 100%',
									  display: showInfoBox1 ? 'block' : 'none'
											}">
										<view class="tit">
											<text>基础提成</text>
										</view>
										<view class="text" style="margin-bottom: 32rpx">
											<text style="padding-right: 10rpx;">*</text>
											<text>本账户为活跃账户（</text><text
												style="color:#0FC6C2">{{getStructureByKey('condition_a_reservations').structureValue}}≤</text>
											<text>本月订台数量，或</text><text
												style="color:#0FC6C2">{{getStructureByKey('condition_a_result').structureValue}}元≤</text><text>本月业绩），解锁基础提成。</text>
										</view>
										<view class="text">
											<text style="padding-right: 10rpx;">*</text>
											<text style="">当月业绩：</text>
											<text style="color:#0FC6C2">2000-9999.99元</text>
											<text>，比例为{{getStructureByKey('individual_personal_a').structureValue}}%。</text>
										</view>
										<view class="text">
											<text style="padding-right: 10rpx;">*</text>
											<text style="">当月业绩：</text>
											<text style="color:#0FC6C2">10000-49999.99元</text>
											<text>，比例为{{getStructureByKey('individual_personal_b').structureValue}}%。</text>
										</view>
										<view class="text">
											<text style="padding-right: 10rpx;">*</text>
											<text style="">当月业绩：</text>
											<text style="color:#0FC6C2">50000元及以上</text>
											<text>，比例为{{getStructureByKey('individual_personal_c').structureValue}}%。</text>
										</view>
									</view>
									<image style="width: 32rpx;" src="/static/reservation/img2.png" mode="widthFix" />
								</view>
							</view>
							<view class="right">
								<text class="percent">{{infoDetails.personRatio || 0}}%</text>
								<text>/{{infoDetails.personSalary || 0}}元</text>
							</view>
						</view>
						<!--				<view class="item" :style="{-->
						<!--          backgroundImage:`url(${bg})`-->
						<!--				}">-->
						<!--					<view class="left">-->
						<!--						<text class="name">-->
						<!--							<text>奖励金</text>-->
						<!--						</text>-->
						<!--						<view class="name" @click.stop="openInfo2">-->
						<!--							<text>比例/金额</text>-->
						<!--							<view class="showInfoBox showInfoBox2" :style="{-->
						<!--          background:`url(${infoBg})`,-->
						<!--          backgroundSize:'100% 100%',-->
						<!--		  display: showInfoBox2 ? 'block' : 'none'-->
						<!--				}">-->
						<!--								<view class="tit">-->
						<!--									<text>奖励金:</text>-->
						<!--								</view>-->
						<!--								<view class="text" style="margin-bottom: 32rpx">-->
						<!--									<text style="padding-right: 10rpx;">*</text>-->
						<!--									<text>本账户为活跃账户（</text><text style="color:#0FC6C2">4≤</text>-->
						<!--									<text>本月订台数量；</text><text-->
						<!--										style="color:#0FC6C2">2000≤</text><text>本月消费金额），且本月业绩≥5000时，解锁奖励金。</text>-->
						<!--								</view>-->
						<!--								<view class="text">-->
						<!--									<text style="padding-right: 10rpx;">*</text>-->
						<!--									<text style="color:#0FC6C2">2000≤</text>-->
						<!--									<text>当月业绩</text>-->
						<!--									<text style="color:#0FC6C2">≤1万</text>-->
						<!--									<text>，比例</text>-->
						<!--									<text style="color:#0FC6C2">8%</text>-->
						<!--									<text>。</text>-->
						<!--								</view>-->
						<!--								<view class="text">-->
						<!--									<text style="padding-right: 10rpx;">*</text>-->
						<!--									<text style="color:#0FC6C2">1万＜</text>-->
						<!--									<text>当月业绩</text>-->
						<!--									<text style="color:#0FC6C2">≤2万</text>-->
						<!--									<text>，比例</text>-->
						<!--									<text style="color:#0FC6C2">9%</text>-->
						<!--									<text>。</text>-->
						<!--								</view>-->
						<!--								<view class="text">-->
						<!--									<text style="padding-right: 10rpx;">*</text>-->
						<!--									<text style="color:#0FC6C2">2万＜</text>-->
						<!--									<text>当月业绩</text>-->
						<!--									<text>，比例</text>-->
						<!--									<text style="color:#0FC6C2">10%</text>-->
						<!--									<text>。</text>-->
						<!--								</view>-->
						<!--							</view>-->
						<!--							<image style="width: 32rpx;" src="/static/reservation/img2.png" mode="widthFix" />-->
						<!--						</view>-->
						<!--					</view>-->
						<!--					<view class="right">-->
						<!--						<text class="percent">{{infoDetails.rewardsPriceScale || 0}}%</text>-->
						<!--						<text>/{{infoDetails.rewardsPrice || 0}}元</text>-->
						<!--					</view>-->
						<!--				</view>-->
						<view class="item" :style="{
							  backgroundImage:`url(${bg})`
									}">
							<view class="left">
								<text class="name">
									<text>分佣</text>
								</text>
								<view class="name" @click.stop="openInfo4">
									<text>比例/金额</text>
									<view class="showInfoBox" :style="{
									  background:`url(${infoBg})`,
									  backgroundSize:'100% 100%',
									  display: showInfoBox4 ? 'block' : 'none'
											}">
										<view class="tit">
											<text>分佣：</text>
										</view>
										<view class="text" style="margin-bottom: 32rpx">
											<text style="padding-right: 10rpx;">*</text>
											<text>本账户为活跃账户（</text><text
												style="color:#0FC6C2">{{getStructureByKey('condition_a_reservations').structureValue}}≤</text>
											<text>本月订台数量，或</text><text
												style="color:#0FC6C2">{{getStructureByKey('condition_a_result').structureValue}}≤</text><text>本月业绩），解锁分佣。</text>
										</view>
										<view class="text">
											<text style="padding-right: 10rpx;">*</text>
											<text>弟弟账户业绩的</text>
											<text
												style="color:#0FC6C2">{{getStructureByKey('commission').structureValue}}%</text>
											<text>，作为分佣，由平台额外发放至哥哥账户。</text>
										</view>
									</view>
									<image style="width: 32rpx;" src="/static/reservation/img2.png" mode="widthFix" />
								</view>
							</view>
							<view class="right">
								<text class="percent">{{infoDetails.personCommissionRatio || 0}}%</text>
								<text>/{{infoDetails.personCommissionSalary || 0}}元</text>
							</view>
						</view>
						<view class="item" :style="{
          backgroundImage:`url(${bg})`
				}">
							<view class="left">
								<text class="name">
									<text>组局</text>
								</text>
								<view class="name" @click.stop="openInfo3">
									<text>数量/金额</text>
									<view class="showInfoBox" :style="{
          background:`url(${infoBg})`,
          backgroundSize:'100% 100%',
		  display: showInfoBox3 ? 'block' : 'none'
				}">
										<view class="tit">
											<text>组局：</text>
										</view>
										<view class="text" style="margin-bottom: 32rpx">
											<text style="padding-right: 10rpx;">*</text>
											<text>本账户为活跃账户（</text><text
												style="color:#0FC6C2">{{getStructureByKey('condition_a_reservations').structureValue}}≤</text>
											<text>本月订台数量，或</text><text
												style="color:#0FC6C2">{{getStructureByKey('condition_a_result').structureValue}}元≤</text><text>本月业绩），解锁组局奖励。</text>
										</view>
										<view class="text">
											<text style="padding-right: 10rpx;">*</text>
											<text>单次组局奖励</text>
											<text
												style="color:#0FC6C2">{{getStructureByKey('sets_reward_price').structureValue}}元</text>
											<text>。</text>
										</view>
									</view>
									<image style="width: 32rpx;" src="/static/reservation/img2.png" mode="widthFix" />
								</view>
							</view>
							<view class="right">
								<text class="percent">{{infoDetails.setsNum || 0}}</text>
								<text>/{{infoDetails.setsRewardsPrice || 0}}元</text>
							</view>
						</view>
						<view class="item" :style="{
				  backgroundImage:`url(${bg})`
						}">
							<view class="left">
								<text class="name">
									<text>VIP组局</text>
								</text>
								<view class="name" @click.stop="openInfo5">
									<text>数量/金额</text>
									<view class="showInfoBox" :style="{
							  background:`url(${infoBg})`,
							  backgroundSize:'100% 100%',
							  display: showInfoBox5 ? 'block' : 'none'
									}">
										<view class="tit">
											<text>VIP组局：</text>
										</view>
										<view class="text" style="margin-bottom: 32rpx">
											<text style="padding-right: 10rpx;">*</text>
											<text>本账户为活跃账户（</text><text
												style="color:#0FC6C2">{{getStructureByKey('condition_a_reservations').structureValue}}≤</text>
											<text>本月订台数量，或</text><text
												style="color:#0FC6C2">{{getStructureByKey('condition_a_result').structureValue}}元≤</text><text>本月业绩），解锁VIP组局奖励。</text>
										</view>
										<view class="text">
											<text style="padding-right: 10rpx;">*</text>
											<text>单次VIP组局奖励</text>
											<text
												style="color:#0FC6C2">{{getStructureByKey('sets_vip_reward_price').structureValue}}</text>
											<text>元。</text>
										</view>
									</view>
									<image style="width: 32rpx;" src="/static/reservation/img2.png" mode="widthFix" />
								</view>
							</view>
							<view class="right">
								<text class="percent">{{infoDetails.vipSetsNum || 0}}</text>
								<text>/{{infoDetails.vipSetRewardsPrice || 0}}元</text>
							</view>
						</view>
						<view class="item" :style="{
            				  backgroundImage:`url(${bg})`
            						}">
							<view class="left">
								<text class="name">
									<text>邀约</text>
								</text>
								<view class="name" @click.stop="openInfo7">
									<text>数量/金额</text>
									<view class="showInfoBox" :style="{
            							  background:`url(${infoBg})`,
            							  backgroundSize:'100% 100%',
            							  display: showInfoBox7 ? 'block' : 'none'
            									}">
										<view class="tit">
											<text>邀约奖励：</text>
										</view>
										<view class="text" style="margin-bottom: 32rpx">
											<text style="padding-right: 10rpx;">*</text>
											<text>本账户为活跃账户（</text><text
												style="color:#0FC6C2">{{getStructureByKey('condition_a_reservations').structureValue}}≤</text>
											<text>本月订台数量；</text><text
												style="color:#0FC6C2">{{getStructureByKey('condition_a_result').structureValue}}≤</text><text>本月消费金额），解锁邀约奖励。</text>
										</view>
										<view class="text">
											<text style="padding-right: 10rpx;">*</text>
											<text>单次邀约奖励</text>
											<text
												style="color:#0FC6C2">{{getStructureByKey('invitation_price').structureValue}}</text>
											<text>。</text>
										</view>
									</view>
									<image style="width: 32rpx;" src="/static/reservation/img2.png" mode="widthFix" />
								</view>
							</view>
							<view class="right">
								<text class="percent">{{infoDetails.invitationNum || 0}}</text>
								<text>/{{infoDetails.invitationRewardsPrice || 0}}元</text>
							</view>
						</view>
						<!--				<view class="item" :style="{-->
						<!--			  backgroundImage:`url(${bg})`-->
						<!--					}">-->
						<!--					<view class="left">-->
						<!--						<text class="name">-->
						<!--							<text>拼卡</text>-->
						<!--						</text>-->
						<!--						<view class="name" @click.stop="openInfo8">-->
						<!--							<text>数量/金额</text>-->
						<!--							<view class="showInfoBox" :style="{-->
						<!--						  background:`url(${infoBg})`,-->
						<!--						  backgroundSize:'100% 100%',-->
						<!--						  display: showInfoBox8 ? 'block' : 'none'-->
						<!--								}">-->
						<!--								<view class="tit">-->
						<!--									<text>拼卡：</text>-->
						<!--								</view>-->
						<!--								<view class="text" style="margin-bottom: 32rpx">-->
						<!--									<text style="padding-right: 10rpx;">*</text>-->
						<!--									<text>本账户为活跃账户（</text><text style="color:#0FC6C2">4≤</text>-->
						<!--									<text>本月订台数量；</text><text-->
						<!--										style="color:#0FC6C2">2000≤</text><text>本月消费金额），解锁拼卡奖励。</text>-->
						<!--								</view>-->
						<!--								<view class="text">-->
						<!--									<text style="padding-right: 10rpx;">*</text>-->
						<!--									<text>单次拼卡奖励</text>-->
						<!--									<text style="color:#0FC6C2">50</text>-->
						<!--									<text>。</text>-->
						<!--								</view>-->
						<!--							</view>-->
						<!--							<image style="width: 32rpx;" src="/static/reservation/img2.png" mode="widthFix" />-->
						<!--						</view>-->
						<!--					</view>-->
						<!--					<view class="right">-->
						<!--						<text class="percent">{{infoDetails.shareTicketNum || 0}}</text>-->
						<!--						<text>/{{infoDetails.shareTicketRewardsPrice || 0}}元</text>-->
						<!--					</view>-->
						<!--				</view>-->
						<view class="item" :style="{
							  backgroundImage:`url(${bg})`
									}">
							<view class="left">
								<text class="name">
									<text>小食套餐</text>
								</text>
								<view class="name" @click.stop="openInfo9">
									<text>数量/金额</text>
									<view class="showInfoBox" :style="{
									  background:`url(${infoBg})`,
									  backgroundSize:'100% 100%',
									  display: showInfoBox9 ? 'block' : 'none'
											}">
										<view class="tit">
											<text>小食套餐：</text>
										</view>
										<view class="text" style="margin-bottom: 32rpx">
											<text style="padding-right: 10rpx;">*</text>
											<text>本账户为活跃账户（</text><text
												style="color:#0FC6C2">{{getStructureByKey('condition_a_reservations').structureValue}}≤</text>
											<text>本月订台数量，或</text><text
												style="color:#0FC6C2">{{getStructureByKey('condition_a_result').structureValue}}元≤</text><text>本月业绩），解锁小食套餐奖励。</text>
										</view>
										<view class="text">
											<text style="padding-right: 10rpx;">*</text>
											<text>单次100元小食套餐奖励20元。</text>
										</view>
									</view>
									<image style="width: 32rpx;" src="/static/reservation/img2.png" mode="widthFix" />
								</view>
							</view>
							<view class="right">
								<text class="percent">{{infoDetails.snacksCommission || 0}}%</text>
								<text>/{{infoDetails.snacksPrice || 0}}元</text>
							</view>
						</view>

						<view class="item" :style="{
						  backgroundImage:`url(${bg})`
								}" v-if="infoDetails.isTeamLeader">
							<view class="left">
								<text class="name">
									<text>主理人绩效</text>
								</text>
								<view class="name" @click.stop="openInfo6">
									<text>比例/金额</text>
									<view class="showInfoBox" :style="{
									  background:`url(${infoBg})`,
									  backgroundSize:'100% 100%',
									  display: showInfoBox6 ? 'block' : 'none'
											}">
										<view class="tit">
											<text>主理人绩效：</text>
										</view>
										<view class="text" style="margin-bottom: 32rpx">
											<text style="padding-right: 10rpx;">*</text>
											<text>本账户为活跃账户（</text><text
												style="color:#0FC6C2">{{getStructureByKey('condition_a_reservations').structureValue}}≤</text>
											<text>本月订台数量，或</text><text
												style="color:#0FC6C2">{{getStructureByKey('condition_a_result').structureValue}}元≤</text><text>本月业绩），解锁主理人绩效。</text>
										</view>
										<view class="text">
											<text style="padding-right: 10rpx;">*</text>
											<text style="color:#0FC6C2">200000-499999.99元</text>
											<text>，比例</text>
											<text
												style="color:#0FC6C2">{{getStructureByKey('team_a').structureValue}}%</text>
											<text>。</text>
										</view>
										<view class="text">
											<text style="padding-right: 10rpx;">*</text>
											<text style="color:#0FC6C2">500000-999999.99元</text>
											<text>，比例</text>
											<text
												style="color:#0FC6C2">{{getStructureByKey('team_b').structureValue}}%</text>
											<text>。</text>
										</view>
										<view class="text">
											<text style="padding-right: 10rpx;">*</text>
											<text style="color:#0FC6C2">1000000及以上</text>
											<text>，比例</text>
											<text
												style="color:#0FC6C2">{{getStructureByKey('team_c').structureValue}}%</text>
											<text>。</text>
										</view>
									</view>
									<image style="width: 32rpx;" src="/static/reservation/img2.png" mode="widthFix" />
								</view>
							</view>
							<view class="right">
								<text class="percent">{{infoDetails.teamRatio || 0}}%</text>
								<text>/{{infoDetails.teamSalary || 0}}元</text>
							</view>
						</view>

						<view class="item" :style="{
						  backgroundImage:`url(${bg})`
								}" v-if="infoDetails.isTeamLeader">
							<view class="left">
								<text class="name">
									<text>主理人分佣</text>
								</text>
								<view class="name" @click.stop="openInfo10">
									<text>比例/金额</text>
									<view class="showInfoBox" :style="{
									  background:`url(${infoBg})`,
									  backgroundSize:'100% 100%',
									  display: showInfoBox10 ? 'block' : 'none'
											}">
										<view class="tit">
											<text>主理人分佣：</text>
										</view>
										<view class="text" style="margin-bottom: 32rpx">
											<text style="padding-right: 10rpx;">*</text>
											<text>本账户为活跃账户（</text><text
												style="color:#0FC6C2">{{getStructureByKey('condition_a_reservations').structureValue}}≤</text>
											<text>本月订台数量，或</text><text
												style="color:#0FC6C2">{{getStructureByKey('condition_a_result').structureValue}}元≤</text><text>本月业绩），解锁主理人分佣。</text>
										</view>
										<view class="text">
											<text style="padding-right: 10rpx;">*</text>
											<text>主理人账户业绩的</text>
											<text
												style="color:#0FC6C2">{{getStructureByKey('director_commission_ratio').structureValue}}%</text>
											<text>，作为分佣，由平台额外发放至主理人账户。</text>
										</view>
									</view>
									<image style="width: 32rpx;" src="/static/reservation/img2.png" mode="widthFix" />
								</view>
							</view>
							<view class="right">
								<text class="percent">{{infoDetails.directorCommissionScale || 0}}%</text>
								<text>/{{infoDetails.directorCommissionPrice || 0}}元</text>
							</view>
						</view>
						<view class="item" :style="{
						  backgroundImage:`url(${bg})`
								}">
							<view class="left">
								<text class="name">
									<text>卡特西奥</text>
								</text>
								<view class="name" @click.stop="openInfo11">
									<text>数量/金额</text>
									<view class="showInfoBox" :style="{
								  background:`url(${infoBg})`,
								  backgroundSize:'100% 100%',
								  display: showInfoBox11 ? 'block' : 'none'
										}">
										<view class="tit">
											<text>卡特西奥：</text>
										</view>
										<view class="text" style="margin-bottom: 32rpx">
											<text style="padding-right: 10rpx;">*</text>
											<text>本账户为活跃账户（</text><text
												style="color:#0FC6C2">{{getStructureByKey('condition_a_reservations').structureValue}}≤</text>
											<text>本月订台数量，或</text><text
												style="color:#0FC6C2">{{getStructureByKey('condition_a_result').structureValue}}元≤</text><text>本月业绩），解锁卡特西奥奖励。</text>
										</view>
										<view class="text">
											<text style="padding-right: 10rpx;">*</text>
											<text>单瓶酒奖励{{getStructureByKey('wine1_price').structureValue}}元</text>
										</view>
									</view>
									<image style="width: 32rpx;" src="/static/reservation/img2.png" mode="widthFix" />
								</view>
							</view>
							<view class="right">
								<text class="percent">{{infoDetails.wine1Commission || 0}}</text>
								<text>/{{infoDetails.wine1Price || 0}}元</text>
							</view>
						</view>
						<view class="item" :style="{
								backgroundImage:`url(${bg})`
							}">
							<view class="left">
								<text class="name">
									<text>柏雅龙</text>
								</text>
								<view class="name" @click.stop="openInfo11">
									<text>数量/金额</text>
									<view class="showInfoBox" :style="{
								  background:`url(${infoBg})`,
								  backgroundSize:'100% 100%',
								  display: showInfoBox11 ? 'block' : 'none'
										}">
										<view class="tit">
											<text>柏雅龙：</text>
										</view>
										<view class="text" style="margin-bottom: 32rpx">
											<text style="padding-right: 10rpx;">*</text>
											<text>本账户为活跃账户（</text><text
												style="color:#0FC6C2">{{getStructureByKey('wine2_price').structureValue}}≤</text>
											<text>本月订台数量，或</text><text
												style="color:#0FC6C2">{{getStructureByKey('wine2_price').structureValue}}元≤</text><text>本月业绩），解锁柏雅龙奖励。</text>
										</view>
										<view class="text">
											<text style="padding-right: 10rpx;">*</text>
											<text>单瓶酒奖励{{getStructureByKey('wine2_price').structureValue}}}}元</text>
										</view>
									</view>
									<image style="width: 32rpx;" src="/static/reservation/img2.png" mode="widthFix" />
								</view>
							</view>
							<view class="right">
								<text class="percent">{{infoDetails.wine2Commission || 0}}</text>
								<text>/{{infoDetails.wine2Price || 0}}元</text>
							</view>
						</view>
						<view class="item" :style="{
										backgroundImage:`url(${bg})`
									}">
							<view class="left">
								<text class="name">
									<text>门票金额</text>
								</text>
								<view class="name" @click.stop="openInfo12">
									<text>比例/金额</text>
									<view class="showInfoBox" :style="{
													  background:`url(${infoBg})`,
													  backgroundSize:'100% 100%',
													  display: showInfoBox12 ? 'block' : 'none'
															}">
										<view class="tit">
											<text>门票金额：</text>
										</view>
										<view class="text" style="margin-bottom: 32rpx">
											<text style="padding-right: 10rpx;">*</text>
											<text>本账户为活跃账户（</text><text
												style="color:#0FC6C2">{{getStructureByKey('condition_a_reservations').structureValue}}≤</text>
											<text>本月订台数量，或</text><text
												style="color:#0FC6C2">{{getStructureByKey('condition_a_result').structureValue}}元≤</text><text>本月业绩），解锁拼卡门票奖励。</text>
										</view>
										<!-- <view class="text">
																<text style="padding-right: 10rpx;">*</text>
																<text>单瓶酒奖励{{getStructureByKey('wine2_price').structureValue}}元</text>
															</view> -->
									</view>
									<image style="width: 32rpx;" src="/static/reservation/img2.png" mode="widthFix" />
								</view>
							</view>
							<view class="right">
								<text class="percent">50%</text>
								<text>/{{infoDetails.ticketPrice || 0}}元</text>
							</view>
						</view>
		<view class="item" :style="{
										backgroundImage:`url(${bg})`
									}">
							<view class="left">
								<text class="name">
									<text>分享门票金额</text>
								</text>
								<view class="name" @click.stop="openInfo12">
									<text>比例/金额</text>
									<view class="showInfoBox" :style="{
													  background:`url(${infoBg})`,
													  backgroundSize:'100% 100%',
													  display: showInfoBox12 ? 'block' : 'none'
															}">
										<view class="tit">
											<text>分享门票金额：</text>
										</view>
										<view class="text" style="margin-bottom: 32rpx">
											<text style="padding-right: 10rpx;">*</text>
											<text>本账户为活跃账户（</text><text
												style="color:#0FC6C2">{{getStructureByKey('condition_a_reservations').structureValue}}≤</text>
											<text>本月订台数量，或</text><text
												style="color:#0FC6C2">{{getStructureByKey('condition_a_result').structureValue}}元≤</text><text>本月业绩），解锁分享拼卡门票奖励。</text>
										</view>
									</view>
									<image style="width: 32rpx;" src="/static/reservation/img2.png" mode="widthFix" />
								</view>
							</view>
							<view class="right">
								<text class="percent">30%</text>
								<text>/{{infoDetails.shareTicketPrice || 0}}元</text>
							</view>
						</view>
					</view>
				</view>
			</template>
		</VideoBox>
	</view>
</template>

<script>
	import {
		getWXStatusHeight
	} from '@/utils/index.js'
	import bg from "@/static/mine/bg2.png";
	import infoBg from "@/static/order/bg1.png";
	import {
		monthListApi,
		myIncomeDetailsApi,
		listAllStructureApi
	} from "@/api/api";
	import VideoBox from "@/components/VideoBox/index.vue";

	export default {
		components: {
			VideoBox
		},
		data() {
			return {
				// 胶囊的宽度
				barWidth: 0,
				bg: bg,
				infoBg: infoBg,
				videoUrl: this.$videoUrl,
				menuHeight: 0,
				selectTime: '', // 月份
				options: [],
				showInfoBox1: false,
				showInfoBox2: false,
				showInfoBox3: false,
				showInfoBox4: false,
				showInfoBox5: false,
				showInfoBox6: false,
				showInfoBox7: false,
				showInfoBox8: false,
				showInfoBox9: false,
				showInfoBox10: false,
				showInfoBox11: false,
				showInfoBox12: false,
				infoDetails: {}, // 提成详情
				isCurrentMonth: true,
				salaryStructureList: [], // 薪资结构数组
			}
		},
		onLoad() {
			let obj = getWXStatusHeight()
			this.barWidth = obj.barWidth + 3
			this.menuHeight = obj.menuHeight
			this.getMonthList()
			this.getAllStructure()
		},
		methods: {
			
			// 薪资结构
			async getAllStructure() {
				const res = await listAllStructureApi()
				this.salaryStructureList = res
			},
			// 获取对应薪资数据
			getStructureByKey(key) {
				const one = this.salaryStructureList.find(item => item.structureKey == key)
				return one;
			},
			// 获取月份列表
			async getMonthList() {
				const res = await monthListApi()
				if (res.code == 200) {
					this.options = res.data.map(item => {
						return {
							value: item,
							label: item,
						}
					})
					this.selectTime = res.data[0]
					await this.getData()
				}
			},
			// 获取薪资信息
			async getData() {
				const data = {
					applyMonth: this.selectTime
				}
				const res = await myIncomeDetailsApi(data)
				if (res.code == 200) {
					if (res.data) {
						this.isCurrentMonth = false
						this.infoDetails = res.data
					} else {
						this.isCurrentMonth = true
						this.infoDetails = {}
					}
				}
			},
			// 关闭说明窗口
			closeInfoBox() {
				this.showInfoBox1 = false
				this.showInfoBox2 = false
				this.showInfoBox3 = false
				this.showInfoBox4 = false
				this.showInfoBox5 = false
				this.showInfoBox6 = false
				this.showInfoBox7 = false
				this.showInfoBox8 = false
				this.showInfoBox9 = false
				this.showInfoBox10 = false
				this.showInfoBox11 = false
				this.showInfoBox12 = false
			},
			changeTime(e) {
				this.selectTime = e
				this.getData()
			},
			openInfo1() {
				this.closeInfoBox()
				this.showInfoBox1 = true
			},
			openInfo2() {
				this.closeInfoBox()
				this.showInfoBox2 = true
			},
			openInfo3() {
				this.closeInfoBox()
				this.showInfoBox3 = true
			},
			openInfo4() {
				this.closeInfoBox()
				this.showInfoBox4 = true
			},
			openInfo5() {
				this.closeInfoBox()
				this.showInfoBox5 = true
			},
			openInfo6() {
				this.closeInfoBox()
				this.showInfoBox6 = true
			},
			openInfo7() {
				this.closeInfoBox()
				this.showInfoBox7 = true
			},
			openInfo8() {
				this.closeInfoBox()
				this.showInfoBox8 = true
			},
			openInfo9() {
				this.closeInfoBox()
				this.showInfoBox9 = true
			},
			openInfo10() {
				this.closeInfoBox()
				this.showInfoBox10 = true
			},
			openInfo11() {
				this.closeInfoBox()
				this.showInfoBox11 = true
			},
			openInfo12() {
				this.closeInfoBox()
				this.showInfoBox12 = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.space {
		width: 5rpx;
		height: 5rpx;
	}

	.bgBox {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 1;
		background: rgba(0, 0, 0, 0.6);
	}

	.showInfoBox1 {
		left: 84rpx;
	}

	.showInfoBox {
		position: absolute;
		width: 546rpx;
		box-sizing: border-box;
		padding: 68rpx 50rpx 45rpx;
		z-index: 8;
		top: 100%;
		left: 15rpx;

		.tit {
			margin: 0 0 30rpx !important;
			font-size: 28rpx;
			color: #0FC6C2;
			line-height: 28rpx;
			text-align: left;
			font-style: normal;
		}

		.text {
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 44rpx;
			text-align: justify;
			font-style: normal;
			margin-bottom: 20rpx;

			text {
				margin-right: 0 !important;
			}
		}

	}

	video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 确保视频填充整个容器，可能会裁剪视频 */
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 0;
	}

	.topFilter {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.right {
			text {
				font-size: 28rpx;
				margin-left: 20rpx;
				color: #0FC6C2;
			}
		}
	}

	.selectTime {
		width: 200rpx;

	}

	.list {
		margin-top: 40rpx;
		color: #fff;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #fff;
			padding: 40rpx;
			margin-top: 30rpx;
			background-size: 100% 100%;

			.left {
				display: flex;
				flex-direction: column;
				justify-content: center;

				.name {
					display: flex;
					font-weight: 500;
					font-size: 28rpx;
					color: #86909C;
					line-height: 48rpx;
					text-align: left;
					font-style: normal;
					position: relative;

					image {
						margin-top: 10rpx;
					}

					text {
						margin-right: 20rpx;
					}
				}

				.time {
					font-size: 22rpx;
					color: #8b8b8b;
				}
			}

			.right {
				font-weight: 500;
				font-size: 36rpx;
				color: #fff;
				line-height: 36rpx;
				text-align: right;
				font-style: normal;

				.percent {
					color: #0FC6C2;
				}
			}
		}

		.tit {
			margin-top: 40rpx;
		}
	}

	.btns {
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
		position: relative;
		z-index: 99;

		.btn {
			padding: 10rpx 30rpx;
			color: #fff;
			border-radius: 10rpx;
			font-size: 26rpx;
			background-color: #5aa10c;
		}
	}

	.content {
		position: relative;
		padding: 40rpx 34rpx;
		z-index: 9;
		flex: 1;
		box-sizing: border-box;
	}

	.left-slot {
		color: #fff;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}

	.outBox {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
</style>